import axios from 'axios'
import React, { memo, useEffect, useState } from 'react'




// 封装一个高亮选择组件
   function Gao(props){
    const {niuma=[]}=props
    const [active,setAct]=useState(0)
    return    <div className='div'>
        {niuma.map((item,i)=>(
            <div key={item} onClick={()=>setAct(i)} className={active==i?'active':''} >{item}</div>
        ))}
    </div>
  } 



const Xiang = memo(() => {
    const  [data,setdata]=useState([])
    useEffect(()=>{
            axios.get('http://localhost:3000/kafei').then(res=>setdata(res.data))   
    },[])
    console.log(data.beixing);
  return (
    <div>
    <Gao niuma={data.beixing}></Gao>
    <Gao niuma={data.wendu}></Gao>
    <Gao niuma={data.tangdu}></Gao>
    
    </div>
  )
})

export default Xiang